<template>
  <div class="main">
    <mine-title>算法参数管理</mine-title>
    <div class="content">
      <!-- <div class="block-header">
                <div class="block-header-left">
                    <mine-button type="primary" @click="addInstance()"
                        ><i class="iconfont icon-add-line"></i
                        >新建项目</mine-button
                    >
                    <mine-button
                        @click="deleteInstance"
                        secondary
                        :disabled="!multipleSelection.length"
                        ><i class="iconfont icon-delete-line"></i
                        >删除</mine-button
                    >
                    <mine-button type="primary" secondary @click="loadData()"
                        ><i class="iconfont icon-reset-line"></i
                        >刷新</mine-button
                    >
                </div>
                <div class="block-header-right"></div>
            </div> -->
      <el-table
        class="table"
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
      >
        <!-- <el-table-column type="selection" width="45"></el-table-column> -->
        <el-table-column label="序号" show-overflow-tooltip width="60">
          <template slot-scope="scope">
            <span>
              {{ scope.$index + (currentPage - 1) * pageSize + 1 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="算法名称"
          prop="algorithmName"
          show-overflow-tooltip
        >
          <template slot="header">
            <span>算法名称</span>
            <mine-table-search
              @searchSubmit="searchSubmit"
              name="algorithmName"
            >
            </mine-table-search>
          </template>
        </el-table-column>
        <el-table-column
          label="算法类型"
          prop="algorithmClass"
          show-overflow-tooltip
        >
          <template slot="header">
            <span>算法类型</span>
          </template>
        </el-table-column>
        <el-table-column
          label="模板类型"
          prop="projectType"
          show-overflow-tooltip
        >
          <template slot="header">
            <span>模板类型</span>
            <mine-table-search
              @searchSubmit="searchSubmit"
              name="projectType"
            ></mine-table-search>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <mine-button type="text" @click="check(scope.row)"
              >详情</mine-button
            >
          </template>
        </el-table-column>
      </el-table>
      <mine-pagination
        @numberChange="numberChange"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
      >
      </mine-pagination>
    </div>
  </div>
</template>
<script>
import qs from "qs";
import { QWebChannel } from "@/modules/index/utils/qwebchannel.js";
export default {
  data() {
    return {
      listQuery: {},
      // table参数
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      multipleSelection: [],
      loading: false,
      tableHeight: window.innerHeight - 330,
    };
  },
  methods: {
    searchSubmit(value) {
      if (value.key === "algorithmName") {
        this.listQuery.algorithmName = value.value;
      }
      if (value.key === "projectType") {
        this.listQuery.projectType = value.value;
      }
      this.loadData(true);
    },
    screenSubmit(value) {
      if (value.key === "unit") {
        this.listQuery.unit = value.value;
      }
      this.loadData(true);
    },
    async loadData(flag) {
      if (flag) {
        this.currentPage = 1;
      }
      const params = {
        ...this.listQuery,
        page: this.currentPage,
        pageSize: this.pageSize,
      };
      this.loading = true;

      let res = {};
      let _self = this;
      try {
        if (_self.$qwebUtil.isQtClient) {
          const uuid = _self.$qwebUtil.generateRandomUUID();
          let sendObject;
          /* eslint-disable-next-line */
          const channel = new QWebChannel(
            window.qt.webChannelTransport,
            async function (channel) {
              sendObject = channel.objects.sendObject;
              // receivedJSON 修改此处发送请求参数
              const receivedJSON = {
                RequestUrl: "/algorithmInfo/pageList",
                RequestMethod: "get",
                ContentType: "application/json;charset=UTF-8",
                RequestBody: qs.stringify(params, { indices: false }),
                isStringParam: true,
                requestId: uuid,
              };
              await send();
              await _self.$qwebUtil.receive(sendObject, receivedJSON);
              // console.error('received','/feCanvas/pageList')
            }
          );
          /* eslint-disable-next-line */
          async function send() {
            sendObject.sendMessage.connect(function (data) {
              if (!data) {
                console.error("No data received.");
              }
              res = JSON.parse(data);
              const result = res.response || {};
              // update the followings
              if (result.success && res.webInfo.requestId == uuid) {
                const data = result.data;
                _self.tableData =
                  data.list && data.list.length ? data.list : [];
                _self.total = data.rowCount || 0;
              } else {
                _self.tableData = [];
                _self.total = 0;
              }
            });
          }
        } else if (this.$webview2.isWPF) {
          const uuid = this.$webview2.generateRandomUUID();
          await this.$webview2.sendWebView2(
            "/algorithmInfo/pageList",
            "get",
            "application/json;charset=UTF-8",
            qs.stringify(params, { indices: false }),
            true,
            uuid
          );
          await window.chrome.webview.addEventListener(
            "message",
            (e) => {
              res = e.data;
              const result = res.response || {};
              // TODO： 定制后台数据处理
              if (result.success && res.webInfo.requestId == uuid) {
                const data = result.data;
                this.tableData = data.list && data.list.length ? data.list : [];
                this.total = data.rowCount || 0;
              } else {
                this.tableData = [];
                this.total = 0;
              }
            },
            {
              once: true,
            }
          );
        } else {
          res = await this.$store.dispatch(
            "algoParamsPageList",
            qs.stringify(params, { indices: false })
          );
          const result = res.data || {};
          // TODO： 定制后台数据处理
          if (result.success) {
            const data = result.data;
            this.tableData = data.list && data.list.length ? data.list : [];
            this.total = data.rowCount || 0;
          } else {
            this.tableData = [];
            this.total = 0;
          }
        }
      } catch (e) {
        console.error(e);
      }
      this.loading = false;
    },
    addInstance() {
      this.$router.push({
        path: "/addItem",
      });
    },
    async deleteInstance() {
      this.$mineConfirm("确认要删除这个项目", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const ids = this.multipleSelection.map((item) => item.id);
          this.loading = true;
          try {
            const res = await this.$store.dispatch("itemBatchDelete", {
              ids: ids,
            });
            const result = res.data || {};
            if (result.success) {
              this.$message.success("删除成功");
              this.loadData(true);
            } else {
              this.$message.error(result.msg || "删除失败");
            }
          } catch (e) {
            console.error(e);
          }
          this.loading = false;
        })
        .catch(() => {});
    },
    // 查看详情
    check(val) {
      this.$router.push({
        path: "/algoParamsDetail",
        query: {
          id: val.id,
        },
      });
    },
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
    },
    numberChange(val) {
      switch (val.flag) {
        case "pageSize":
          this.pageSize = val.pageSize;
          this.loadData(true);
          break;
        case "currentPage":
          this.currentPage = val.currentPage;
          this.loadData(false);
          break;
        default:
          break;
      }
    },
  },
  mounted() {
    this.loadData();
  },
};
</script>

<style lang="less" scoped>
.table {
  margin-top: 15px;
}
//.el-button--danger {
//  color:red;
//}
</style>
